import { Layout, Menu, Breadcrumb, Button } from 'antd';
import 'antd/dist/antd.css';
import { Link } from 'umi';
import { createStore } from 'react-redux';
import store from '@/pages/store';
import { Provider } from 'react-redux';
const { Header, Footer, Content } = Layout;

const App = (props) => {
  const { children } = props;

  return (
    <div className="App">
      <Provider store={store}>
        <Layout className="layout">
          <Header>
            <div className="logo" />
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">
                <Link to="/">home</Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/employee">employee</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/list">list</Link>
              </Menu.Item>
            </Menu>
          </Header>
          <Content style={{ padding: '0 50px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <div id="contentRoot">{children}</div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Provider>
    </div>
  );
};

export default App;
